<template>
	<view class="">
		<g-watermark/>
		<u-dropdown ref="uDropdown">
			<u-dropdown-item title="类型">
				<view class="slot-content" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true" style="height: 100rpx;">
						<view style="padding: 20rpx;">
							<u-checkbox-group>
								<u-checkbox @change="checkboxChangeTypeList($event,item)" v-model="item.checked"
									v-for="item in typeList" :key="item.value"
									:name="item.value">{{item.label}}</u-checkbox>
							</u-checkbox-group>
						</view>
					</scroll-view>
					<view style="display: flex;justify-content: space-around;padding:0 20rpx 20rpx 20rpx ;">
						<u-button :size="size" type="primary" @click="handleTypeListOk">确定</u-button>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item title="人员" v-if="type!=0">
				<view class="slot-content" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true" style="height: 130rpx;">
						<view style="padding: 20rpx;">
							<u-checkbox-group @change="checkboxGroupChange">
								<u-checkbox @change="checkboxChange($event,item)" v-model="item.checked"
									v-for="item in mlist" :key="item.value"
									:name="item.value">{{item.label}}</u-checkbox>
							</u-checkbox-group>
						</view>
					</scroll-view>
					<view style="display: flex;justify-content: space-around;padding:0 20rpx 20rpx 20rpx ;">
						<u-button :size="size" type="error" @click="handleDelete" v-if="type=='2'">删除</u-button>
						<u-button :size="size" @click="checkedAll">{{isCheckedAll?"取消全选":'全选'}}</u-button>
						<u-button :size="size" type="primary" @click="handleOk">确定</u-button>
					</view>
				</view>
			</u-dropdown-item>
		</u-dropdown>
	</view>
</template>

<script>
	import {
		debounce
	} from '@/utils/util.js'
	import {
		actionTypeList
	} from '../schedule.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			type: {
				type: [String, Number],
				default: '0'
			},
			size: {
				type: String,
				default: 'default'
			},
			actionType: {
				type: [String, Number],
				default: '0'
			},
		},
		data() {
			this.checkedAll = debounce(this.checkedAll, 500, false)
			return {
				mlist: [],
				isCheckedAll: false,
				typeList: actionTypeList,
			}
		},
		watch: {
			list: {
				handler: function(newVal) {
					console.log("list", newVal)
					let newList = newVal
					newList.forEach(item => {
						item.checked = true
					})
					this.mlist = newList
					this.setIsCheckedAll()
				},
				immediate: true
			},
			actionType: {
				handler: function(newVal) {
					console.log("actionType", newVal)
					if (newVal) {
						const checkeds = newVal.split(',')
						this.typeList = this.typeList.map(item => {
							return {
								...item,
								checked: checkeds.includes(item.value)
							}
						})
					}
				},
				immediate: true
			},
		},
		// computed: {
		// 	isCheckedAll() {
		// 		console.log("isCheckedAll",this.mlist) //不更新
		// 		return this.mlist.every(item => !!item.checked)
		// 	}
		// },
		methods: {
			handleOk() {
				const checkedListValue = this.mlist.filter(item => !!item.checked).map(item => item.value).join(",")
				this.$emit("success", checkedListValue)
				this.$refs.uDropdown.close();
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e, reocrd) {
				console.log("checkboxChange", e);
				reocrd.checked = e.value
				this.$forceUpdate()
				this.setIsCheckedAll()
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 全选
			checkedAll() {
				this.mlist = this.mlist.map(val => {
					val.checked = this.isCheckedAll ? false : true;
					return val
				})
				this.setIsCheckedAll()
			},
			setIsCheckedAll() {
				this.isCheckedAll = this.mlist.every(item => {
					return item.checked === true
				})

				console.log("this.isCheckedAll", this.isCheckedAll, this.mlist)
				this.$forceUpdate()
			},
			handleDelete() {
				const checkedListValue = this.mlist.filter(item => !!item.checked).map(item => item.id).join(",")
				this.$emit("delete", checkedListValue)
			},

			//选中类型
			checkboxChangeTypeList(e, reocrd) {
				reocrd.checked = e.value
				this.$forceUpdate()
			},
			handleTypeListOk() {
				const checkedListValue = this.typeList.filter(item => !!item.checked).map(item => item.value).join(",")
				this.$emit("handleActionType", checkedListValue)
				this.$refs.uDropdown.close();
			},
		}
	}
</script>

<style>
</style>